<template>
  <div id="community" >
    <el-row style="margin-top:20px;position:relative;" >
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="16" >
        <div class="tab" >
          <el-tabs v-model="articleCategory">
            <el-tab-pane label="问题讨论" name="1"></el-tab-pane>
            <el-tab-pane label="面试经历" name="2"></el-tab-pane>
            <el-tab-pane label="技术交流" name="3"></el-tab-pane>
            <el-tab-pane label="企业内推" name="4"></el-tab-pane>
            <el-tab-pane label="面试技巧" name="5"></el-tab-pane>
          </el-tabs>
        </div>
        <el-row style="margin-top:10px">
          <el-col :span="17">
            <div style="background-color: white">
              <div class="filter">
                <span style="font-size:14px;color: #606266;">筛选：</span>
                <el-radio v-model="filter" label="1" value="1">最热</el-radio>
                <el-radio v-model="filter" label="2" value="2">最新</el-radio>
                <el-button icon="el-icon-plus" size="mini" type="primary" style="float: right" @click="publish">发布文章</el-button>
              </div>
              <el-divider direction="horizontal"></el-divider>
              <div class="article_content">
                <div class="article_item"  v-for="article in articleList" :key = article.articleId>
                  <div class="item_top">
                    <div class="publish_user" @click="goUserPage" >
                      <el-avatar style="vertical-align: middle" :size="30">
                        <svg v-show="article.userName.length % 5 === 0" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-touxiang1">{{'article.userName'.length}}</use>
                        </svg>
                        <svg v-show="article.userName.length % 5 === 1" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-touxiang2"></use>
                        </svg>
                        <svg v-show="article.userName.length % 5 === 2" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-touxiang"></use>
                        </svg>
                        <svg v-show="article.userName.length % 5 === 3" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-touxiang3"></use>
                        </svg>
                        <svg v-show="article.userName.length % 5 === 4" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-BARISTA"></use>
                        </svg>
                      </el-avatar>
                      <span class="publish_name">{{ article.userName }}</span>
                    </div>
                    <span class="publish_category">{{ article.articleType }}</span>
                  </div>
                  <div class="content" @click="goArticle(article.articleId)">
                    <div class="publish_title">{{ article.articleTitle }}</div>
                    <div class="publish_content">{{article.articleContent}}
                    </div>
                    <div class="publish_detail">
                      <span><i class="iconfont icon-show_renqiredu">
                        {{23*article.commentNumber}}
                      </i></span>
                      <span style="padding-left:15px;"><i class="iconfont icon-comment">
                       {{ article.commentNumber }}
                      </i></span>
                      <span style="float:right">发布于 {{article.createTime}}</span>
                    </div>
                    <el-divider direction="horizontal"></el-divider>
                  </div>
                </div>

                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    align="center"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :hide-on-single-page="value"
                    style="padding-top: 15px"
                >
                </el-pagination>
              </div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="hot_article">
              <div class="choice">
                <span style="font-size:18px;color: #606266;">文章热榜</span>
                <el-divider direction="horizontal"></el-divider>
                <div class="choice_title"><span class="choice_index" style="color:#d9000c;">1</span>
                  <span>2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index" style="color:#f55e3d;">2</span>
                  <span>2023届前端暑期总结</span></div>
                <div class="choice_title"><span class="choice_index" style="color:#ff9821;">3</span>
                  <span>2023届总结</span></div>
                <div class="choice_title"><span class="choice_index">7</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">5</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">6</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">7</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">8</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">9</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">10</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getArticleList} from "@/network/recruit";
function compare(property){
  return function(a,b){
    var value1 = a[property];
    var value2 = b[property];
    return value2 - value1;
  }
}
function compareTime(property){
  return function(a,b){
    var value1 = new Date(a[property]).getTime();
    var value2 =  new Date(b[property]).getTime();
    return value2 - value1;
  }
}

export default {
  name: "Community",
  components:{
  },
  data() {
    return {
      articleCategory: '1',
      filter: '1',
      value:true,
      currentPage:1,
      total:1000,
      pageSize:30,
      articleList:[]
    }
  },
  mounted() {
    this.ArticleList();
  },
  watch:{
    filter(newName,oldName){
        if(newName>oldName){
          this.articleList = this.articleList.sort(compareTime('createTime'));
        }else {
          this.articleList = this.articleList.sort(compare('commentNumber'));
        }
    }
  },
  methods:{
    handleCurrentChange(currentPage){
      this.currentPage = currentPage;
    },
    goArticle(articleId){
      this.$router.push({name:'article',params:{articleId:articleId}});
    },
    goUserPage(){
      this.$router.push({name:'userPage',params:{userId:''}});
    },
    ArticleList(){
      getArticleList(this.currentPage,this.pageSize,1).then(res=>{
        this.articleList = res.data.data.list.sort(compare('commentNumber'));
        this.total = res.data.data.total;
      })
    },
    publish(){
      if(localStorage.getItem("common_userName")){
        this.$router.push({name:'editArticle'});
      }else{
        this.$message.error("你还没登录，请先登录");
        this.$router.push("/login");
      }
    }
  }
}
</script>

<style scoped>
.tab {
  background-color: white;
}

.grid-content {
  min-height: 50px;
  color: white;
  font-size: 14px;
}

/deep/ .el-tabs__item {
  height: 50px;
  line-height: 50px;
}

/deep/ .el-tabs__header {
  margin: 0;
}

/deep/ .el-tabs__nav-scroll {
  margin-left: 20px;
}

.article_content {
  padding: 10px 20px 20px 20px;
}

.hot_article {
  width: 97.5%;
  height: 420px;
  background-color: white;
  margin-left: 10px;
}

.el-divider--horizontal {
  height: 0.5px;
  margin: 5px 0 5px 0;
}


.filter {
  padding: 10px 20px 10px 20px;
}

.choice {
  padding: 10px 20px 0 20px;
}

.publish_name {
  color: cornflowerblue;
}

.publish_user {
  display: inline-block;
  height: 30px;
}

.publish_name {
  position: relative;
  top: 3px;
  padding-left: 5px;
}

.publish_category {
  font-size: 14px;
  position: relative;
  top: 8px;
  color: #8a8a8a;
  float: right;
}

.publish_title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 7px;
}

.publish_content {
  margin-top: 5px;
  color: #8a8a8a;
  font-size: 14px;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 3;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

.publish_detail {
  color: #8a8a8a;
  margin-top: 5px;
  font-size: 14px;
}

.article_item {
  margin-bottom: 20px;
  cursor: pointer;
}

.article_item .el-divider--horizontal {
  height: 0.5px;
  margin: 20px 0 5px 0;
}

.choice_title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  color: #414a60;
  margin:15px 0;
}

.choice_index {
  display: inline-block;
  width:20px;
  font-family: kanzhun-Regular, kanzhun;
  margin-right: 5px;
  color:#8b8e99;
}
</style>